<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @submit.native.prevent
    >
      <el-form-item label="诊疗类别查询">
        <el-input
          placeholder="请输入查询关键字"
          prefix-icon="el-icon-search"
          v-model="formInline.title"
          @keyup.enter.native="getClinic"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addVisible = true"
          >新增</el-button
        >
        <!-- <el-button type="primary" @click="getClinic" >查询</el-button> -->
      </el-form-item>
    </el-form>

    <el-table :data="clinicData" style="width: 100%">
      <el-table-column
        label="序号"
        type="index"
        :index="indexMethod"
        width="200"
      >
      </el-table-column>
      <el-table-column prop="clinic_title" label="诊疗项目名称">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
<!-- <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div> -->

    <el-dialog width="35%" title="诊疗类别" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="类别名称" :label-width="formLabelWidth">
          <el-input v-model="form.clinic_title" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog width="35%" title="诊疗类别" :visible.sync="addVisible">
      <el-form :model="form">
        <el-form-item label="类别名称" :label-width="formLabelWidth">
          <el-input v-model="form.clinic_title" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addClinic">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      formInline: {
        title: "",
      },
      clinicData: [],
      form: { clinic_title: "" },
      dialogFormVisible: false, //编辑框
      addVisible: false,
      formLabelWidth: "120px",
    };
  },
  mounted() {
    this.getClinic();
  },
  methods: {
    getClinic() {
      let kw = "";
      if (this.formInline.title != "") {
        kw = "?clinic_title=" + this.formInline.title;
      }

      let url = `/clinic/project${kw}`;
      this.axios.get(url).then((res) => {
        this.clinicData = res.data;
        // console.log(this.clinicData);
      });
    },
    submit() {
      this.dialogFormVisible = false;
      let url = `/clinic/updateClinic`;
      let params = this.form;
      this.axios.post(url, params).then((res) => {
        this.getClinic();
      });
      //   console.log(row.clinic_title);
    },
    addClinic() {
      this.addVisible = false;
      
      let url = `/clinic/addClinic`;
      let params = `title=${this.form.clinic_title}`;
      this.axios.post(url, params).then((res) => {
        console.log(params);
        this.getClinic();
      });
      this.form = {};

    },
    handleEdit(index, row) {
      //   console.log(index, row);
      this.form = {};
      this.form.clinic_id = row.clinic_id;

      this.dialogFormVisible = true;
    },
    handleDelete(index, row) {
      //   console.log(index, row);
      let url = `/clinic/${row.clinic_id}`;
      this.axios.get(url).then((res) => {
        this.getClinic();
      });
    },
    indexMethod(index) {
      return index++ + 1;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>